import Message, {MessageProps} from './msg';
import React from 'react'
import ReactDOM from 'react-dom';


const createMessage = (function(){
	const div = document.createElement('div');
	div.setAttribute('id', 'm_message_container');
	document.body.appendChild(div);
	const msgRef = React.createRef() as React.RefObject<any>;
	ReactDOM.render(<Message ref={msgRef} />, div);

	return {
		addMessage(msgProps) {
			return msgRef.current.handleMessage(msgProps);
		}
	}
})()

const message = (type, content, duration = 3500, options: MessageProps={}) => {
  return createMessage.addMessage({ type, content, duration, options });
}

export default {
	info(content?: string | React.ReactNode, duration?: number, options?: MessageProps) {
		return message('info', content, duration, options);
	},
	success(content?: string | React.ReactNode, duration?: number, options?: MessageProps) {
		return message('success', content, duration, options);
	},
	warning(content?: string | React.ReactNode, duration?: number, options?: MessageProps) {
		return message('warning', content, duration, options);
	},
	danger(content?: string | React.ReactNode, duration?: number, options?: MessageProps) {
		return message('danger', content, duration, options);
	},
	loading(content?: string | React.ReactNode, duration?: number, options?: MessageProps) {
		return message('loading', content, duration, options);
	},
}
